<template>
  <div class="administer">
    <div class="administer-table">
      <el-table
        :data="tableData.slice((curPage -1)*pagesize,curPage*pagesize)"
        style="width: 100%"
        border
        :header-cell-style="getRowClass"
        ref="multipleTable"
        tooltip-effect="dark"
      >
        <el-table-column prop="num" label="#" min-width="10%"></el-table-column>
        <el-table-column prop="name" label="业务名称" min-width="60%"></el-table-column>
        <el-table-column prop="apply1" label="申请主体" min-width="20%"></el-table-column>
        <el-table-column prop="appleTime" label="申请时间" min-width="20%"></el-table-column>
        <el-table-column prop="state" label="申请状态" min-width="20%"></el-table-column>

        <el-table-column label="业务管理" min-width="50%">
          <template slot-scope="scope">
            <el-button size="small " type="success" plain @click="handleEdit(scope.$index, scope.row)" class="el-button-primary">业务信息管理</el-button>
            <el-button size="small "  type="success" plain @click="handleDelete(scope.$index, scope.row)">预览与提交</el-button>
            <el-button size="small " type="danger" plain  @click="handleRem(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="grid-content bg-purple-light">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCureentChange"
          :current-page.sync="curPage"
          :page-size="pagesize"
          prev-text="上一页"
          next-text="下一页"
          layout="total, sizes, prev, pager, next, jumper"
          :page-sizes="[10,20,30,40]"
          :total="tableData.length"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      pagesize: 10,
      curPage: 1,
      multipleSelection: [],
      tableData: [
        {
          num: "1-568",
          name: "业务名称",
          apply1: "",
          appleTime: "2020年07月07号",
          state: "待提交"
        },
        {
          num: "1-568",
          name: "业务名称",
          apply1: "",
          appleTime: "2020年07月07号",
          state: "待提交"
        },
        {
          num: "1-568",
          name: "业务名称",
          apply1: "",
          appleTime: "2020年07月07号",
          state: "待提交"
        },
        {
          num: "1-568",
          name: "业务名称",
          apply1: "",
          appleTime: "2020年07月07号",
          state: "待提交"
        },
        {
          num: "1-568",
          name: "业务名称",
          apply1: "",
          appleTime: "2020年07月07号",
          state: "待提交"
        },
        {
          num: "1-568",
          name: "业务名称",
          apply1: "",
          appleTime: "2020年07月07号",
          state: "待提交"
        },
        {
          num: "1-568",
          name: "业务名称",
          apply1: "",
          appleTime: "2020年07月07号",
          state: "待提交"
        },
        {
          num: "1-568",
          name: "业务名称",
          apply1: "",
          appleTime: "2020年07月07号",
          state: "待提交"
        },
        {
          num: "1-568",
          name: "业务名称",
          apply1: "",
          appleTime: "2020年07月07号",
          state: "待提交"
        },
        {
          num: "1-568",
          name: "业务名称",
          apply1: "",
          appleTime: "2020年07月07号",
          state: "待提交"
        },
        {
          num: "1-568",
          name: "业务名称",
          apply1: "",
          appleTime: "2020年07月07号",
          state: "待提交"
        },
        {
          num: "1-568",
          name: "业务名称",
          apply1: "",
          appleTime: "2020年07月07号",
          state: "待提交"
        },
        {
          num: "1-568",
          name: "业务名称",
          apply1: "",
          appleTime: "2020年07月07号",
          state: "待提交"
        }
      ]
    };
  },
  methods: {
    getRowClass({ row, column, rowIndex, columnIndex }) {
      if (rowIndex == 0) {
        return "background:#e4e7ea";
      } else {
        return "";
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //点击表格后三个按钮
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    handleRem(index, row) {
      console.log(index, row);
    },
    //显示数量
    handleCureentChange(val) {
      this.curPage = val;
    },
    //每页显示条数
    handleSizeChange(val) {
      this.pagesize = val;
    }
  }
};
</script>

<style lang="less" scoped>
.administer {
  padding: 20px;
  background-color: white;
  box-shadow: 0px 3px 6px #9c9c9c;
  .el-pagination{
    margin-top: 10px;
    text-align: center;
  }
}
</style>